import React, { Component } from 'react';

const MyContex = React.createContext();
const {Provider,Consumer} = MyContex;
export default class C extends Component {
  state = {cvalue: "cccc"}
  render() {
    return (
      <>
        <h2>我是最外层C</h2>
        <Provider value={this.state.cvalue}>
           <B />
        </Provider>
      
      </>
    )
  }
}

class B extends Component {
  render() {
    return (
      <>
         <h3>我是第二层B</h3>
         <A />
         <FunA />
      </>
    )
  }
}

class A extends Component {
  static contextType = MyContex;
  render() {
    return (
      <>
         <h4>我是第三层A</h4>
          <div>我从A组件接到的值是{this.context}</div>
      </>
    )
  }
}


function FunA() {
  return (
    <>
       <h4>我是第三层A</h4>
        <Consumer>
        {
          value => {
            return (
              <div>我从A组件接到的值是{value}</div>
            )
          }
        }
        </Consumer>
    </>
  )
}

